<!--
 * @Author: zx
 * @Date: 2022-05-13 14:09:20
 * @LastEditTime: 2022-12-25 20:47:48
 * @Description:
 * @LastEditors: yaoling 1871883713@qq.com
-->
<template>
  <el-form
    ref="loginForm"
    :model="state.form"
    :rules="state.rules"
    @keydown.enter="handleSubmit"
    class="form-login"
    v-if="state.refresh"
  >
    <el-form-item prop="userName">
      <!--账号密码登录-->
      <el-input
        size="large"
        v-show="activeTab === 1"
        v-model="state.form.userName"
        placeholder="账号:uroot"
      ></el-input>
      <!--短信登录-->
      <el-input
        size="large"
        v-show="activeTab === 2"
        v-model="state.form.phoneNumber"
        placeholder="手机号"
      >
        <template #prefix> 中国 +86<i class="el-input__icon el-icon-search"></i> </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <!--账号密码登录-->
      <el-input
        size="large"
        v-show="activeTab === 1"
        type="password"
        v-model="state.form.password"
        placeholder="密码:root123456"
      ></el-input>
      <!--短信登录-->
      <el-input
        size="large"
        v-show="activeTab === 2"
        v-model="state.form.code"
        placeholder="请输入短信验证码"
      >
        <template #suffix>
          <span v-show="activeTab === 2" class="slot-icon">
            <a
              href="javascript:void(0)"
              @click="onGetCode"
              :style="{ color: state.time <= 0 ? '' : '#ccc' }"
            >
              <template v-if="state.time > 0">
                获取验证码
                <span>({{ state.time }}s)</span>
              </template>
              <template v-else> 重新获取 </template>
            </a>
          </span>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button class="submit" size="large" @click.stop="handleSubmit" color="#6C52EA" long
        >{{ activeTab === 2 ? '登录 / 注册' : '登录' }}
      </el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { reactive, ref, watch } from 'vue'
// import { ElMessage } from 'element-plus'
// import { dataInterfaces } from '@/apis/login/login'
const props = defineProps({
  userNameRules: {
    type: Array,
    default: () => {
      return [
        { required: true, message: '账号不能为空', trigger: 'blur' },
        { required: true, message: '手机号不能为空', trigger: 'blur' }
      ]
    }
  },
  passwordRules: {
    type: Array,
    default: () => {
      return [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { required: true, message: '请输入验证码', trigger: 'blur' }
      ]
    }
  },
  activeTab: {
    type: Number,
    required: true,
    default: null
  },
  loginLoading: {
    type: Boolean,
    required: true,
    default: false
  }
})
const emits = defineEmits(['on-success-valid'])
const state = reactive({
  form: {
    // 用户名
    userName: '',
    // 手机号
    phoneNumber: '',
    // 密码
    password: '',
    // 验证码
    code: ''
  },
  // 手机号正则
  phoneReg: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
  // 结束时间戳
  endTime: 0,
  // 倒计时（重发）
  countDown: 0,
  // 计时器对象
  interval: null,
  hasCode: false,
  // 倒计时
  time: 0,
  code: '',
  btnTitle: '登录',
  btnType: 'primary',
  btnStatus: false,
  btnWidthType: true,
  //切换刷新
  refresh: true,
  // 验证码获取状态 0 从未获取 1 获取中 2  已获取已过期(重新获取) 3 已获取未过期(倒计时)
  codeStatus: 0
})
// const rules = reactive({
//   userName: props.userNameRules[props.activeTab - 1],
//   password: props.passwordRules[props.activeTab - 1]
// })

// /**
//  * @desc: 获取验证码
//  * 验证码获取状态 0 从未获取 1 获取中 2  已获取已过期(重新获取) 3 已获取未过期(倒计时)
//  */
// const onGetCode = () => {
//   if (state.time <= 0) {
//     if (!state.form.phoneNumber || !state.phoneReg.test(state.form.phoneNumber)) {
//       ElMessage.error('请输入正确格式的手机号码!')
//       return
//     }
//     state.time = 60
//     countDown()
//     dataInterfaces({
//       __method_name__: 'globalFunctionCall',
//       typeName: 'LoginFuncClass',
//       type: 'behavior',
//       funcName: 'SendLoginSms',
//       payload: {
//         phone: state.form.phoneNumber
//       }
//     }).then((res) => {
//       if (res.code == 200) {
//         ElMessage.success('发送成功!')
//         state.hasCode = true
//       }
//     })
//   }
// }
// /**
//  * @desc: 倒计时
//  */
// const countDown = () => {
//   if (state.time > 0) {
//     state.interval = setInterval(() => {
//       state.time = state.time - 1
//       if (state.time < 1) {
//         clearInterval(state.interval)
//         state.hasCode = false
//       }
//     }, 1000)
//   } else {
//     clearInterval(this.interval)
//     state.hasCode = false
//   }
// }
// /**
//  * @desc: 提交登录请求
//  */
// const loginLoading = ref(false)
// const handleSubmit = () => {
//   if (state.hasCode) {
//     // 已发送验证码
//     emits('on-success-valid', {
//       phoneNumber: state.form.phoneNumber,
//       code: state.form.code
//     })
//   } else {
//     // 未发送验证码
//     localStorage.setItem(
//       'TempData',
//       JSON.stringify({ userName: state.form.userName, password: state.form.password })
//     )
//     emits('on-success-valid', {
//       userName: state.form.userName,
//       password: state.form.password
//     })
//   }
// }
</script>

<style scoped lang="less">
.slot-icon {
  padding-left: 10px;
  color: #a1a5ad;
  font-size: 14px;
  border-left: 1px solid #dcdee2;
  a {
    color: #0076ff;
  }
}
@media (max-width: 1366px) {
  .el-form-item {
    margin-bottom: 20px;
  }
}
</style>
<style lang="less">
.form-login {
  overflow: hidden;
  .ivu-input-group-prepend,
  .ivu-input-group-append {
    background-color: #fff;
  }
  .submit {
    width: 100%;
    height: 40px !important;
    color: #fff;
    font-weight: bold;
    letter-spacing: 8px;
    border-radius: 10px;
    cursor: pointer;
    /* 动画过渡 */
    transition: 0.5s;
  }
  input::-webkit-input-placeholder {
    /* placeholder颜色  */
    color: #a1a5ad;
    /* placeholder字体大小  */
    font-size: 14px;
  }
}
</style>
